<template>
  <div id="flavorBox">
    <div id="title">
        <h3>口味管理</h3>
    </div>
    <!-- <div id="abilityBox">
      666455555555555555555555555555555555555555555555555555555555555555555
    </div> -->
    <div id="tableBox">
      <el-table
        :cell-class-name="tableCellClassName"
        :highlight-current-row="true"
        :stripe="true"
        :border="true"
        :data="tableData"
        :row-style="{height: '50px'}"
        style="width: 100%"
        class="elTable"
        >
        <el-table-column
          align="center"
          fixed
          prop="id"
          label="ID"
          width="220">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="名称"
          width="120">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="name"
          label="标签列表"
          width="730">
          <template slot-scope="scope">
            <el-button size="small" icon="el-icon-plus" circle @click="openFlavorDetail(scope.row.id)"></el-button>
            <el-tag
              size="small"
              :key="tag.name"
              v-for="tag in dynamicTags[scope.row.index]"
              closable
              effect="plain"
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag.name}}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="添加标签"
      center
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
      :destroy-on-close="true"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">
        <el-form ref="addTagData" :model="addTagData" label-width="80px">
          <el-form-item label="标签名称">
            <el-input v-model="addTagData.name" max="7" min="1"></el-input>
          </el-form-item>
          <!-- <el-form-item label="标签名称">
            <el-input v-model="addTagData.name"></el-input>
          </el-form-item> -->
        </el-form>
        <el-button @click="closeFlavorDetail('addTagData')">取 消</el-button>
        <el-button type="primary" @click="addFlavorDetail()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import router from '@/router';
export default {
    data() {
        return {
          //表格数据
          tableData: [],
          //表格数据条数
          dataNum: '',
          //ID列表
          flavorList:[],
          //标签数据
          dynamicTags: [],
          //添加标签弹框是否弹出
          dialogVisible: false,
          //添加页面的数据
          addTagData:{
            name:"",
            flavorId:""
          }
        };
    },

    methods: {    
      //添加标签
      addFlavorDetail(){
        this.$axios.post("http://localhost:8888/hwy/cater/flavorDetail/addFlavorDetail",this.addTagData)
                  .then((response) => {
                    // console.log(response)
                    this.$message({
                        message: response.data.data,
                        type: 'success',
                    });
                    this.findFlavor();
                    this.closeFlavorDetail(); 
                  })
      },
      //关闭添加标签弹窗
      closeFlavorDetail(formName){
        this.dialogVisible = false;   
        this.addTagData.name = '';
        this.addTagData.flavorId = '';
      },
      //打开添加标签弹窗
      openFlavorDetail(id){
        this.addTagData.flavorId = id;
        this.dialogVisible = true;
      },
      //el表格的回调方法给索引赋值
      tableCellClassName({row, column, rowIndex, columnIndex}){
        row.index=rowIndex;
        column.index=columnIndex;
      },
      //查询所有口味
      findFlavor(){
        this.$axios.get("http://localhost:8888/hwy/cater/flavor/findFlavor")
                  .then((response) => {
                    // console.log(response)
                    this.tableData = response.data.data.flavorList;
                    this.flavorList = response.data.data.idList;
                    // console.log("idList:"+this.flavorList)
                    this.findFlavorDetail(this.flavorList);
                  })
      },
      //查询标签
      findFlavorDetail(idList){
        // console.log(idList)
        this.$axios.post("http://localhost:8888/hwy/cater/flavorDetail/findFlavorDetail",this.flavorList)
                  .then((response) => {
                    // console.log(response)
                    this.dynamicTags = response.data.data;
                    // console.log(this.dynamicTags[0])
                  })
      },
      
      //删除标签方法
      handleClose(tag) {
        // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        console.log("删除了标签。")
        console.log(tag.id)
        this.$axios.post("http://localhost:8888/hwy/cater/flavorDetail/deletedFlavorDetail/"+tag.id)
                  .then((response) => {
                    // console.log("删除标签返回信息"+response)
                    this.$message({
                        message: response.data.data,
                        type: 'success',
                    });
                    this.findFlavor();
                  })
      },
    },

    mounted() {  
      this.findFlavor();
    },
}

</script>

<style scoped>
@import '@/assets/css/eat/flavor.css';
</style>